const id = location.search.split("=")[1];

    request({
        url:"./json/listAll.json",
        success:(res)=>{
            this.res=(JSON.parse(res).listL.img);
            let i = 0;
            this.res.some((val,idx)=>{
                i = idx;
                return val.proId === id;
            })
            this.render1(this.res[i]);
        }
    });


    

    function render1(data){
        let str = "";
        let str2="";
        str+=`<img src="${data.url[0].src}" alt="">
        <span id="span8"></span>`;
        $(".s_box").html(str);
        str2+=`<img src="${data.url[0].src}" alt="">`;
        $(".b_box").html(str2);

        let str1="";
        str1+=`
        <img src="${data.url[0].src}" alt="" class="imgs">
        <img src="${data.url[1].src}" alt="" class="imgs">
        <img src="${data.url[2].src}" alt="" class="imgs">
        <img src="${data.url[3].src}" alt="" class="imgs"> 
        `;
        $(".bottom").html(str1);

        let str3="";
        str3+=`
            ${data.name}
        `;
        $(".message>span").html(str3);

        let str4="";
        str4=`
            ￥${data.price}
        `;
        $(".message>p").html(str4);

        require.config({
            baseUrl:"./modules-detail",
            paths:{
                jq: "./libs/jquery.2.2.4.js",
                setLocal: "setLocal"
            },
            
        })
        
        require(["jq","setLocal"],function(_, sl){
            // 3. 绑定事件
            let add=document.querySelector(".addC");
            add.onclick=function(){
                let id = data.proId;
                let price = data.price;
                sl({id, price, num:1, flag:0});         
            }
        })

        new Big({
            sBox:document.querySelector(".intro>.s_box"),
            sImg:document.querySelector(".s_box img"),
            bBox:document.querySelector(".b_box"),
            bBimg:document.querySelector(".b_box img"),
            span8:document.getElementById("span8"),
            bottom:document.querySelector(".bottom"),
            leftB:document.getElementById("left"),
            rightB:document.getElementById("right"),
            img:document.querySelectorAll(".imgs"),
            intro:document.querySelector(".intro"),
            imgArr:new Array()
        });
    }


    function Big(ops){
        // 选择元素
        this.sBox = ops.sBox;
        this.sImg=ops.sImg;
        this.span8 = ops.span8;
        this.bBox = ops.bBox;
        this.bBimg = ops.bBimg;
        this.bottom=ops.bottom;
        this.leftB=ops.leftB;
        this.rightB=ops.rightB;
        this.img=ops.img;
        // this.box=ops.box;
        this.index=0;
        this.imgArr=[];
        this.four = 0;
        for(let i=0;i<this.img.length;i++){
            this.imgArr.push(this.img[i]); 
        }
        // this.box.style.width=this.img[0].offsetWidth * (this.imgArr.length)+"px";
        this.imgArr[0].className="active";
        // 绑定事件
        this.addEvent();
        this.round();
    }
    Big.prototype.addEvent = function(){
        const that = this;
        // 绑定进入
        this.sBox.onmouseover = function(){
            // 显示
            that.show()
        }
        // 绑定离开
        this.sBox.onmouseout = function(){
            // 隐藏
            that.hide()
        }
        // 绑定移动
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            // 移动
            that.move(e);
        }
    }
    
    Big.prototype.round = function(){
        const _that=this;
        this.leftB.onclick=function(){
    
            _that.leftMove();
        }
        this.rightB.onclick=function(){
            _that.rightMove();
        }
    
        for(let a=0;a<this.imgArr.length;a++){
            this.imgArr[a].onclick=function(){
                _that.click(a);
            }
        }
    }
    
    Big.prototype.leftMove=function(){
        if(this.index===0){
            this.index=this.imgArr.length-1;
            this.bottom.left=-(this.imgArr.length-1)*this.imgArr[0].offsetWidth+"px";
          
        }else{
            this.index--;
        }
        // if(this.four === 0){
        //     this.four = (this.imgArr.length /4)-1;
        // }else{
        //     this.four--
        // }
        console.log(this.index);
        this.change(this.index);
        // this.box.style.left = -(this.four*360) +"px";
        
    }
    Big.prototype.rightMove=function(){
        if(this.index===this.imgArr.length-1){
            this.index=0;
            this.bottom.left=0;
            
        }else{
            this.index++;
    
        }
    
        //this.index模4 == 1时 this.four ++ 
        if((this.index+1) %4 == 1){
            this.four++;
        }
        if(this.four == 3){
            this.four=0;
        }
        console.log(this.four);
        this.change(this.index);
        //this.four 乘以 大盒子宽度 赋给小盒子left
        this.box.style.left = -(this.four*360) +"px";
    }
    Big.prototype.click=function(a){
        this.index=a;
        this.change(this.index);
    }
    
    Big.prototype.change=function(index,four){
        for(let b=0;b<this.imgArr.length;b++){
            this.imgArr[b].className="imgs";
        }
        this.imgArr[index].className="active";
        this.sImg.src=this.imgArr[this.index].src;
        this.bBimg.src=this.imgArr[this.index].src;
        
    }
    
    
    Big.prototype.show = function(){
        this.bBox.style.display = "block";
        this.span8.style.display = "block";
        // 设置span的尺寸
        // 提醒一定要在显示之后设置，否则，显示之前无法获取css样式
        // 提前获取各种尺寸
        this.sbw = this.sBox.offsetWidth;
        this.sbh = this.sBox.offsetHeight;
        this.bbiw = this.bBimg.offsetWidth;
        this.bbih = this.bBimg.offsetHeight;
        this.bbw = this.bBox.offsetWidth;
        this.bbh = this.bBox.offsetHeight;
    
        // 计算并设置span的尺寸
        this.span8.style.width = this.sbw / (this.bbiw / this.bbw) + "px";
        this.span8.style.height = this.sbh / (this.bbih / this.bbh) + "px";
        console.log(this.span8.style.width);
        console.log(this.span8.style.height);
    }
    Big.prototype.hide = function(){
        this.bBox.style.display = "none";
        this.span8.style.display = "none";
    }
    
    Big.prototype.move = function(e){
        // e.offsetX
        // e.offsetY
        // this.sBspan.style.left = e.offsetX + "px"
        // this.sBspan.style.top = e.offsetY + "px"
    
        // 计算当前移动的距离
        let l = e.pageX  - this.span8.offsetWidth / 2;
        let t = e.pageY - this.span8.offsetHeight / 2;
        console.log(e.pageX);
        console.log(e.pageY);
        console.log(this.sBox.offsetLeft);
        console.log(this.sBox.offsetTop);  
        console.log(l);
        console.log(t);
    
        // 边界限定
        if(l < 0) l = 0;
        if(t < 0) t = 0;
        if(l > this.sbw - this.span8.offsetWidth){
            l = this.sbw - this.span8.offsetWidth
        }
        if(t > this.sbh - this.span8.offsetHeight){
            t = this.sbh - this.span8.offsetHeight
        }
    
        // 设置span的跟随效果
        this.span8.style.left = l + "px";
        this.span8.style.top = t + "px";
    
        // 计算比例
        // 当前移动的距离 / 一共能移动的距离
        let x = l / (this.sbw - this.span8.offsetWidth);
        let y = t / (this.sbh - this.span8.offsetHeight);
        // console.log(x, y)
    
        // 跟随移动
        // 当前移动的距离 = 总距离 * 比例
        this.bBimg.style.left = (this.bbw - this.bbiw) * x + "px";
        this.bBimg.style.top = (this.bbh - this.bbih) * y + "px";
    }
    